<template>
  <div class="cms-views-container personal-cms-pages">
    <header class="h-10 px-4 leading-10 text-center">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">个人资料</span>
    </header>
    <div class="px-4 mt-4">
      <div class="h-[70px] flex items-center">
        <span class="text-base text-[#666] w-[50px]">头像</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <img
            src="https://img2.baidu.com/it/u=939903330,3137313886&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=384"
            class="w-[46px] h-[46px]"
            style="border-radius: 50%"
            alt=""
          />
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">昵称</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">大大马里奥</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">性别</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">男</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">邮箱</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">12345@133.com</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">手机号</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">180800008000</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">生日</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">2000-05-01</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
      <div class="flex items-center h-14">
        <span class="text-base text-[#666] w-[50px]">所在地</span>
        <span class="ml-[37px] personal-border w-[254px] h-full flex items-center justify-between">
          <span class="text-base text-black">四川成都</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
    </div>
    <div
      v-if="type === 2"
      class="absolute bottom-0 flex flex-col text-sm text-black items-center left-0 z-10 h-[172px] w-full rounded-tl-lg rounded-tr-lg bg-white"
    >
      <span class="h-[52px] mt-2" style="line-height: 52px">从相册选择</span>
      <span class="h-[52px]" style="line-height: 52px">拍照</span>
      <span class="h-[52px] w-full text-center" style="line-height: 52px; border-top: 1px solid #f1f3f7">取消</span>
    </div>
    <div v-if="type === 3" class="absolute bottom-0 left-0 z-10 h-[136px] w-full rounded-tl-lg rounded-tr-lg bg-white">
      <header class="mt-2 h-[52px] flex items-center justify-between px-4 text-[#48494d] text-sm">
        <span>取消</span>
        <span class="font-medium">设置昵称</span>
        <span class="text-[#ff613f]">保存</span>
      </header>
      <div class="mx-4 bg-[#fafafa] h-11 rounded flex items-center justify-between text-sm px-3">
        <span class="text-[#48494d]">花花</span>
        <span>
          <span>
            <img :src="mineIcons.password_close" alt="" class="w-5 h-5 relative bottom-0.5" />
          </span>
          <span class="pl-3 text-[#999]">2/16</span>
        </span>
      </div>
    </div>
    <div v-if="type === 4" class="absolute bottom-0 left-0 z-10 h-[188px] w-full rounded-tl-lg rounded-tr-lg bg-white">
      <header class="mt-2 h-[52px] flex items-center justify-between px-4 text-[#48494d] text-sm">
        <span>取消</span>
        <span class="text-[#ff613f]">保存</span>
      </header>
      <div class="flex flex-col items-center text-sm">
        <span class="h-[52px] text-[#ff613f] font-medium" style="line-height: 52px">女</span>
        <span class="h-[52px] text-black" style="line-height: 52px">男</span>
      </div>
    </div>
    <div v-if="type === 5" class="absolute bottom-0 left-0 z-10 h-[264px] w-full rounded-tl-lg rounded-tr-lg bg-white">
      <header class="mt-2 h-[52px] flex items-center justify-between px-4 text-[#48494d] text-sm">
        <span>取消</span>
        <span class="text-[#ff613f]">保存</span>
      </header>
      <div class="flex flex-col items-center personal-birthday text-[#999] text-sm">
        <span class="h-[52px] flex items-center">
          <i>1999</i>
          <i class="mx-4">12</i>
          <i>31</i>
        </span>
        <span class="h-[52px] flex items-center text-black">
          <i>2000</i>
          <i class="mx-4">1</i>
          <i>01</i>
        </span>
        <span class="h-[52px] flex items-center">
          <i>2001</i>
          <i class="mx-4">2</i>
          <i>02</i>
        </span>
      </div>
    </div>
    <div v-if="type === 6" class="absolute bottom-0 left-0 z-10 h-[264px] w-full rounded-tl-lg rounded-tr-lg bg-white">
      <header class="mt-2 h-[52px] flex items-center justify-between px-4 text-[#48494d] text-sm">
        <span>取消</span>
        <span class="text-[#ff613f]">保存</span>
      </header>
      <div class="flex flex-col items-start personal-area text-[#999] text-sm pl-[120px]">
        <span class="mb-3">
          <i>上海</i>
        </span>
        <span class="mb-3 text-[#ff613f]">
          <i>四川</i>
          <i class="pl-[78px]">成都</i>
        </span>
        <span class="mb-3" v-for="item in areaList" :key="item.area">
          <i>{{ item.area }}</i>
          <i class="pl-[78px]">{{ item.areaChild }}</i>
        </span>
      </div>
    </div>
    <div v-if="type !== 1" class="personal-masker"></div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import mineIcons from '../assets/mine'

withDefaults(defineProps<{ type: number }>(), { type: 1 })

const areaList = [
  {
    area: '天津',
    areaChild: '自贡'
  },
  {
    area: '西藏',
    areaChild: '攀枝花'
  },
  {
    area: '新疆',
    areaChild: '泸州'
  },
  {
    area: '云南',
    areaChild: '德阳'
  }
]
</script>

<style scoped lang="less">
.personal-cms-pages {
  .personal-border {
    border-bottom: 1px solid #f1f3f7;
  }
  .personal-masker {
    @apply absolute left-0 top-0 bottom-0 right-0;
    background: rgba(0, 0, 0, 0.3);
  }
  .personal-birthday {
    i {
      font-style: normal;
      width: 55px;
      @apply text-center;
      padding-bottom: 15px;
      border-bottom: 1px solid #f1f3f7;
    }
  }
  .personal-area {
    i {
      font-style: normal;
    }
  }
}
</style>
